import axios from "../../http/axios";
import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { NavBar, Space, Toast, Button } from "antd-mobile";
import { GoodJobO, StarO, WarningO } from "@react-vant/icons";
import style from "./index.module.scss";
import { Cell, Popup, PopupPosition } from "react-vant";
const Index: React.FC = () => {
  const [state, setState] = useState<PopupPosition>("");
  const onClose = () => setState("");
  //关注
  const [guanzhu, setGuanzhu] = useState(() => {
    const storedGuanzhu = localStorage.getItem("guanzhu");
    return storedGuanzhu ? JSON.parse(storedGuanzhu) : false;
  }); //是否关注[1:已关注,0:未关注
  const navigate = useNavigate();
  const back = () => {
    navigate("/kepuhaozhu");
  };
  const { id } = useParams();
  console.log(id);
  const [itemData, setItemData] = useState<any>({} as any);
  //获取到详情数据
  const getData = async (id: number) => {
    const res = await axios.get("/api/dateid", {
      params: { id: id },
    });

    setItemData(res.data.data);
    console.log(res.data.data);
    setGuanzhu(res.data.data.flag);
  };
  //关注
  const geng = async (id2: any) => {
    await axios.get("/api/date", {
      params: { id2 },
    });
    //让前台数据刷新
    getData(id as any);
  };
  const dz = async (id: any) => {
    console.log(id);
    await axios.get("/api/date", { params: { id } });
    //让前台数据刷新
    getData(id as any);

    // setAllData(
    //   allData.map((item: any) => {
    //     if (item.id === id) {
    //       item.goodflag = !item.goodflag;
    //       if (item.goodflag) {
    //         item.reply_num = item.reply_num + 1;
    //       } else {
    //         item.reply_num = item.reply_num - 1;
    //       }
    //     }
    //     return item;
    //   })
    // );
  };
    const tz = (id: any) => {
    console.log(id);
    navigate(`/kepuhaoxqxq/${id}`);
  };
  useEffect(() => {
    getData(id as any);
  }, []);

  return (
    <div>
      <div className={style.top}>
        <NavBar
          style={{
            background: "blue",
            color: "#fff",
            width: "100%",
            height: "40px",
            position: "fixed",
            zIndex: 999,
            top: 0,
          }}
          onBack={back}
        >
          {itemData.shanc}
        </NavBar>
      </div>
      <div className={style.desc}>
        <h2>&nbsp; &nbsp; &nbsp;{itemData.shanc}</h2>
      </div>
      <div className={style.listitem}>
        <img src={itemData.image} alt="" />
        <span>
          {itemData.name} {itemData.type} {itemData.keshi} {itemData.hospital}
        </span>
        <span>
          {/* 判断是否关注 */}
          {guanzhu === true ? (
            <Button
              size="mini"
              style={{ background: "#fff", color: "#ccc" }}
              onClick={() => geng(itemData.id)}
            >
              已关注
            </Button>
          ) : (
            <Button
              size="mini"
              style={{ background: "red", color: "#fff" }}
              onClick={() => geng(itemData.id)}
            >
              +关注
            </Button>
          )}
        </span>
      </div>
      <div className={style.listfooter}>
        <h3>{itemData.shanc}</h3>
        <img src={itemData.image} alt="" />
        <h3>
          {itemData.shanc}
          {itemData.shanc}
          {itemData.shanc}
          {itemData.shanc}
          {itemData.shanc}
          {itemData.shanc}
          {itemData.shanc}
          {itemData.shanc}
          {itemData.shanc}
        </h3>
        <span>
          <Button size="mini" color="primary">
            <GoodJobO /> 有帮助
          </Button>
        </span>
      </div>
      <div className={style.container}>
        <input
          type="text"
          placeholder="说两句吧"
          className={style.inputbox}
          onClick={() => setState("bottom")}
        />
        <div className={style.icons}>
          <div onClick={() => dz(itemData.id)}>
            {itemData.goodflag ? (
              <div>
                <GoodJobO className={style.icons11} />
                <span>有帮助{itemData.reply_num}</span>
              </div>
            ) : (
              <div>
                <GoodJobO className={style.icons2} />
                <span> 有帮助{itemData.reply_num}</span>
              </div>
            )}
          </div>
          <div>
            <StarO className={style.icons1} />
            <span>收藏</span>
          </div>
          <div>
            <WarningO className={style.icons1} />
            <span>举报</span>
          </div>
        </div>
      </div>
      <Popup
        visible={state === "bottom"}
        style={{ height: "30%" }}
        position="bottom"
        onClose={onClose}
      >
        <div className={style.commentsection}>
          <textarea
            placeholder="说两句吧.."
            className={style.commentinput}
            name=""
            id=""
          ></textarea>
          <div className={style.charcount}>0/200</div>

          <div className={style.wb}>
            <div>
              <div>评论区不能询问病情</div>
              <div  onClick={() => tz(itemData.id)}>
                
                  点击这里进行咨询&gt;
                
              </div>
            </div>
            <button className={style.sendbutton}>发送</button>
          </div>
        </div>
      </Popup>
    </div>
  );
};

export default Index;
